<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue列表动画</title>
    <style>
        li{
            list-style: none;
            padding: 1rem;
        }
        li:hover{
            background-color: pink;
            transition: background 3s ease;
        }
        .myFrames-enter,.myFrames-leave-to{
            opacity: 0;
            transform: translateY(100px);
        }
        .myFrames-enter-active,.myFrames-leave-active{
            transition: all 1.5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text"><button @click="handelAdd">添加</button>
        <transition-group tag="ul" appear name="myFrames">
            <li v-for="(item,index) in list" :key="index">
                <span>编号:{{item.id}}</span>---------
                <span>姓名:{{item.name}}</span>---------
                <button @click="handelDel(index)">删除</button>
            </li>
        </transition-group>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data() {
            return {
                list:[
                    {id:1,name:"张三"},
                    {id:2,name:"李四"},
                    {id:3,name:"王五"},
                    {id:4,name:"老六"},
                    {id:5,name:"十七"},
                    {id:6,name:"老八"}
                ],
                text:''
            }
        },
        methods: {
            handelAdd(){
                if(this.text === '') return
                this.list.push({id:this.list.length+1,name:this.text})
                this.text = ''
            },
            handelDel(index){
                this.list.splice(index,1)
            }
        },
    })
</script>
</html>